<!-- 图表 》 柱状图 -->

<template>
  <EasyChart :baseOption="OPTION" :option="option" :onClick="toClick" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixChart from '../mixChart'
import ChartBar from '../ChartBar'

const name = 'ChartColumn'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixChart],

  /**
   * 属性注册
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...ChartBar.computed,

    /**
     * 颜色对象
     */
    colorObj: () => CORE.WEB.BASE.COLOR.COLUMN,

    /**
     * 图表配置
     */
    option() {
      const { xData, dataList, unit, serie, diy } = this

      const option = {
        yAxis: unit ? { name: `单位：${unit}` } : {},
        xAxis: { data: xData },
        series: [
          { ...serie, data: dataList },
        ],
      }

      return CORE.merge(option, diy)
    },
  },
}
</script>
